/*!******************************************************************************
 *     ___                  _   ____  ____
 *    / _ \ _   _  ___  ___| |_|  _ \| __ )
 *   | | | | | | |/ _ \/ __| __| | | |  _ \
 *   | |_| | |_| |  __/\__ \ |_| |_| | |_) |
 *    \__\_\\__,_|\___||___/\__|____/|____/
 *
 *  Copyright (c) 2014-2019 Appsicle
 *  Copyright (c) 2019-2022 QuestDB
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 *
 ******************************************************************************/

.js-vis-panel {
  display: none;
}

#vis-canvas {
  height: 400px;
  width: 100%;
}

.portlet {
  padding: 12px 20px 15px;
  border: 1px solid #e7ecf1 !important;
}

.portlet-title {
  padding: 10px 0;
  border-bottom: 1px solid #eef1f5;
  margin-bottom: 20px;
  font-size: 16px;
  color: #2f353b !important;
}

.portlet-body {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5px 0 0;
  height: calc(100% - 60px);
}

.qdb-list {
  overflow-x: hidden;
  overflow-y: auto;

  ul {
    padding: 0;

    li {
      background: $gray;
      border-left: 4px solid #e7eaec;
      border-right: 4px solid #e7eaec;
      border-radius: 4px;
      color: inherit;
      margin-bottom: 2px;
      padding: 10px 15px;
      list-style-type: none;
      cursor: pointer;
      font-size: 11pt;

      span.label {
        float: right;
      }
    }

    li.active {
      background: $navy;
      color: white;
      border: none;
      padding: 10px 19px;
    }
  }
}

.qdb-list-add-btn, .qdb-list-delete-btn {
  float: right;
  position: relative;
  top: -10px;
}

#visualisation-top {
  margin-bottom: 10px;
}

// new things

.config-tabs {

  height: calc(100% - 30px);

  .tab-content {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    height: calc(100% - 60px);
  }

  .nav-tabs {
    border: none;
    margin: 0;

    li {
      border-top: 3px solid transparent;
      margin-bottom: -2px;

      a {
        margin-right: 0;
        font-size: 14px;
        font-weight: normal;
      }

      a:hover {
        font-weight: 400;
        border-radius: 0;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-top: 1px solid transparent;
        border-bottom: none;
      }
    }

    li.active {
      border-top: 3px solid #ed6b75;
      margin-top: 0;
      position: relative;

      a, a:hover {
        border-top: none !important;
        font-weight: 400;
        border-radius: 0;
        border-left: 1px solid $gray;
        border-right: 1px solid $gray;
      }
    }
  }
}

.v-fit {
  height: 100%;
}

.qdb-vis-placeholder {
  min-height: 300px;

  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    color: #d6d6d6;
  }
}

.qdb-vis-query-editor {
  height: calc(100% - 120px);
}

#_vis_frm_query_text {
  height: calc(100% - 35px) !important;
}